<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>原生JS实现购物车结算功能代码</title>
    <link rel="stylesheet" href="../css/style.css" />
    <script src="../js/jquery-3.6.0.min.js"></script>
    <style>
        input::-webkit-outer-spin-button,
        input::-webkit-inner-spin-button {
            -webkit-appearance: none !important;
            margin: 0;
        }
    </style>
</head>

<body>
    <div class="catbox">
        <table id="cartTable">
            <thead>
                <tr>
                    <th><label>
                            <input class="check-all check" type="checkbox" />&nbsp;&nbsp;全选</label></th>
                    <th>商品</th>
                    <th>单价</th>
                    <th>数量</th>
                    <th>小计</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
                <!-- <tr>
                    <td class="checkbox"><input class="check-one check" type="checkbox" /></td>
                    <td class="goods"><img src="../images/1.jpg" alt="" /><span>Casio/卡西欧 EX-TR350</span></td>
                    <td class="price">5999.88</td>
                    <td class="count"><span class="reduce"></span>
                        <input class="count-input" type="text" value="1" />
                        <span class="add">+</span>
                    </td>
                    <td class="subtotal">5999.88</td>
                    <td class="operation"><span class="delete">删除</span></td>
                </tr>
                <tr>
                    <td class="checkbox"><input class="check-one check" type="checkbox" /></td>
                    <td class="goods"><img src="../images/2.jpg" alt="" /><span>Canon/佳能 PowerShot SX50 HS</span></td>
                    <td class="price">3888.50</td>
                    <td class="count"><span class="reduce"></span>
                        <input class="count-input" type="text" value="1" />
                        <span class="add">+</span>
                    </td>
                    <td class="subtotal">3888.50</td>
                    <td class="operation"><span class="delete">删除</span></td>
                </tr>
                <tr>
                    <td class="checkbox"><input class="check-one check" type="checkbox" /></td>
                    <td class="goods"><img src="../images/3.jpg" alt="" /><span>Sony/索尼 DSC-WX300</span></td>
                    <td class="price">1428.50</td>
                    <td class="count"><span class="reduce"></span>
                        <input class="count-input" type="text" value="1" />
                        <span class="add">+</span>
                    </td>
                    <td class="subtotal">1428.50</td>
                    <td class="operation"><span class="delete">删除</span></td>
                </tr>
                <tr>
                    <td class="checkbox"><input class="check-one check" type="checkbox" /></td>
                    <td class="goods"><img src="../images/4.jpg" alt="" /><span>Fujifilm/富士 instax mini 25</span></td>
                    <td class="price">640.60</td>
                    <td class="count"><span class="reduce"></span>
                        <input class="count-input" type="text" value="1" />
                        <span class="add">+</span>
                    </td>
                    <td class="subtotal">640.60</td>
                    <td class="operation"><span class="delete">删除</span></td>
                </tr> -->
            </tbody>
        </table>
        <div class="foot" id="foot">

            <a class="fl" id="deleteAll" href="javascript:;">删除</a>
            <div class="fr closing" onclick="getTotal();">结 算</div>
            <input type="hidden" id="cartTotalPrice" />
            <div class="fr total">合计：￥<span id="priceTotal">0.00</span></div>
            <div class="fr selected" id="selected">已选商品<span id="selectedTotal">0</span>件<span
                    class="arrow up">︽</span><span class="arrow down">︾</span></div>
            <div class="selected-view">
                <div id="selectedViewList" class="clearfix">
                    <div><img src="../images/1.jpg"><span>取消选择</span></div>
                </div>
                <span class="arrow">◆<span>◆</span></span>
            </div>
        </div>
    </div>

</body>
<script>

    // ajax是$()函数的静态方法
    $.ajax({
        // type: "get",
        url: "../data/shoppingCar.json",
        // async: true,
        // data:"",
        dataType: "json",
        success: function (data) {
            var { list } = data;

            var html = "";

            list.forEach((item) => {
                var { title, desc, img, cprice, buyNum } = item;
                html += `<tr>
                    <td class="checkbox"><input class="check-one check" type="checkbox" /></td>
                    <td class="goods">
                        <img src="${img}" alt="" />
                        <span>${title}</span>
                    </td>
                    <td class="price">${Number(cprice).toFixed(2)}</td>
                    <td class="count">
                        <span class="reduce">${buyNum > 1 ? "-" : ""}</span>
                        <input class="count-input" type="number" value="${buyNum}" />
                        <span class="add">+</span>
                    </td>
                    <td class="subtotal">${(cprice * buyNum).toFixed(2)}</td>
                    <td class="operation"><span class="delete">删除</span></td>
                </tr>`
            })

            $("#cartTable tbody").html(html);
        }
    })

    $(".check-all").click(function () {
        // console.log(this.checked);
        var status = $(this).prop("checked");
        // console.log(status);
        $(".check-one").prop("checked", status);
        getTotal()
    })

    $(document).on("click", ".check-one", function () {
        // var flag = $(".check-one:checked").length === $(".check-one").length;
        // console.log(flag);

        // var flag = Array.from($(".check-one")).every(checkOne => $(checkOne).prop("checked"));
        // $(".check-all").prop("checked", flag);
        isAllChecked();
        getTotal()
    })

    $(document).on("click", ".add", function () {
        var num = $(this).prev().val();
        num++;
        $(this).prev().val(num);

        var price = $(this).parent().prev().text() * 1;
        var subtotal = (price * num).toFixed(2);

        $(this).parent().next().text(subtotal);

        $(this).prevAll(".reduce").text("-");
        getTotal()
    })

    $(document).on("click", ".reduce", function () {
        var num = $(this).next().val();
        if (num <= 1) return false;
        num--;
        if (num == 1) {
            $(this).text("");
        }

        $(this).next().val(num);

        var price = $(this).parent().prev().text() * 1;
        var subtotal = (price * num).toFixed(2);

        $(this).parent().next().text(subtotal);
        getTotal()
    })

    $(document).on("focus", ".count-input", function () {
        var originVal = $(this).val();
        console.log(originVal);

        // $(document).off("blur", ".count-input");
        // $(document).on("blur", ".count-input", function () {
        //     console.log("hello");
        //     var num = $(this).val();

        //     if (num > 1) {
        //         $(this).prev().text("-");
        //     } else if (num == 1) {
        //         $(this).prev().text("");
        //     } else {
        //         $(this).val(originVal);
        //         return false;
        //     }

        //     var price = $(this).parent().prev().text() * 1;
        //     var subtotal = (price * num).toFixed(2);
        //     $(this).parent().next().text(subtotal);
        // })


        $(document).one("blur", ".count-input", function () {
            console.log("hello");
            var num = $(this).val();

            if (num > 1) {
                $(this).prev().text("-");
            } else if (num == 1) {
                $(this).prev().text("");
            } else {
                $(this).val(originVal);
                return false;
            }

            var price = $(this).parent().prev().text() * 1;
            var subtotal = (price * num).toFixed(2);
            $(this).parent().next().text(subtotal);

            getTotal()

        })


    })


    $(document).on("click", ".delete", function () {
        if (confirm("是否删除当前商品?")) {
            $(this).parents("tr").remove();
            isAllChecked()
            getTotal()
        }
    })

    $(document).on("click", "#deleteAll", function () {
        $(".check-one:checked").parents("tr").remove();
        isAllChecked();
        getTotal()
    })

    function isAllChecked() {
        var flag = Array.from($(".check-one")).every(checkOne => $(checkOne).prop("checked"));
        flag = $(".check-one").length == 0 ? false : flag;
        $(".check-all").prop("checked", flag);
    }


    function getTotal() {
        var sum = 0;
        var allPrice = 0;

        $(".check-one:checked").each(function () {
            var num = $(this).closest("tr").find(".count-input").val() * 1;
            var subtotal = $(this).closest("tr").find(".subtotal").text() * 1;

            sum += num;
            allPrice += subtotal;
        })

        $("#selectedTotal").text(sum);
        $("#priceTotal").text(allPrice.toFixed(2));



    }



</script>

</html>